<template>
  <div>
    <div class="module_row">
      <!-- <div class="title-img">
          <img src="../assets/img/like.webp" alt="">
      </div> -->
      <div id="fall-list" class="clearfix">
        <div ref="left" class="fall-line" id="test">
          <div class="contentItem" v-for="(item, index) in data1" :key="index">
            <div class="fall-item">
              <img :src="item.img_Url" />
            </div>
            <div class="contentItem-personal">
              <div class="title">{{ item.title }}</div>
              <div class="user">
                <div class="user-img">
                  <img :src="item.user_imgUrl" alt="" />
                </div>
                <div class="user-name">{{ item.user_name }}</div>
              </div>
            </div>
          </div>
        </div>

        <div ref="right" class="fall-line">
          <div class="contentItem" v-for="(item, index) in data2" :key="index">
            <div class="fall-item">
              <img :src="item.img_Url" />
            </div>
            <div class="contentItem-personal">
              <div class="title">{{ item.title }}</div>
              <div class="user">
                <div class="user-img">
                  <img :src="item.user_imgUrl" alt="" />
                </div>
                <div class="user-name">{{ item.user_name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <button @click="loadImagex">加载</button> -->
    </div>
  </div>
</template>

<script>
let homeData = require("../../static/json/home.json");
export default {
  data() {
    return {
      list: [],
      data1: [],
      data2: [],
    };
  },
  mounted() {
    let _this = this;
    this.loadImagex();
    window.addEventListener("scroll", _this.handleScroll, true);
  },

  methods: {
    //读取图片
    loadImagex() {
      this.doSort(0, this.list);
    },
    doSort(index, list) {
      if (index < list.length) {
        if (this.$refs.left.offsetHeight <= this.$refs.right.offsetHeight) {
          // 获取两列的高度，对比左右列的高度
          this.data1.push(list[index]); // 左>右 就push到data1数组
        } else {
          this.data2.push(list[index]);
        }
        let that = this;
        this.$nextTick(() => {
          // 延时调用
          setTimeout(() => {
            that.doSort(index + 1, list);
          }, 400);
        });
      }
    },
    handleScroll() {
      this.$nextTick(() => {
        // var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // let scrollHeight = document.querySelector("#fall-list").scrollHeight;
        // // 滚动条到底部
        // if (scrollTop + windowHeight == scrollHeight) {
        //   this.doSort(0, this.list); // 滚到底部加载数据
        // }
        // console.dir(document.querySelector("#fall-list"))
      })
    },
  },
  created() {
    this.list = homeData.content;
  },
  destroyed(){
    this.doSort(0, this.list)
  }
};
</script>

<style lang="less">
.module_row {
  background: #f5f5f5;
  .title-img{
    margin-top: 20px;
    img{
        width: 100%;
    }
  }
  #fall-list {
    position: relative;
    .fall-line {
      float: left;
      width: 50%;
      .contentItem {
        margin: 20px auto;
        .fall-item {
          width: 96%;
          max-height: 440px;
          margin: 0px auto;
          overflow: hidden;
          background: #fff;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .contentItem-personal {
          padding: 0px 10px 20px 10px;
          width: 287px;
          color: #666;
          font-size: 22px;
          background: #fff;
          margin: 0px auto;
          .title {
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .user {
            display: flex;
            .user-img {
              width: 42px;
              height: 42px;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .user-name {
              line-height: 42px;
              font-size: 18px;
              font-weight: 900;
              color: #333;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}

button {
  width: 100%;
  height: 50px;
  border: none;
}
</style>
